<template>
  <f7-page class="qm-page">
    <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <div class="welcome">您好！欢迎登录</div>
    <f7-login-screen-title class="platform">
      广州市民族宗教综合分析应用平台
    </f7-login-screen-title>

    <f7-card class="qm-card">
      <div class="qm-row">
        <span class="land">登录</span>
        <span class="register">注册</span>
      </div>
      <span class="ID">
        <img src="static/img/land/index6/my.svg" alt="" class="iconimg" />账号
      </span>
      <qm-search
        placeholder="请输入您的账号"
        v-model="user"
        label=""
        shape="round"
        clearable
        clear-trigger="always"
        left-icon=""
      >
      </qm-search>
      <div class="password">
        <img src="static/img/land/index6/cooking.svg" alt="" class="iconimg" />
        密码
      </div>
      <qm-search
        placeholder="请输入您的密码"
        v-model="password"
        :clearable="false"
        shape="round"
        left-icon=""
        :type="textstyle"
      >
        <template #right-icon>
          <img
            src="static/img/land/index1/biyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-if="!showpassword"
            @click="modifypassword()"
          />
            <img
            src="static/img/land/index1/kaiyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-else
            @click="modifypassword()"
          />
        </template>
      </qm-search>
      <f7-row>
        <f7-col style="text-align: end;">
          <f7-link class="qm-link">忘记密码</f7-link>
        </f7-col>
      </f7-row>
      <f7-button raised fill round class="qm-button">登录</f7-button>
    </f7-card>
    <div class="footer" >广州市齐明软件科技有限公司提供技术支持</div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    modifypassword() {
      this.showpassword = !this.showpassword;
    },
  },
};
</script>

<style lang="less" scoped>
.arrow {
  position: fixed;
  color: var(--color-fill-grey-inverse);
  margin-top: 10px;
  left: 6%;
}
.qm-page {
  background: url("../../../../static/img/land/index5/backgroundimg.png");
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% 100%;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  position: relative;
  .welcome {
    margin-top: calc(163px * var(--ratio));
    margin-left: calc(62px * var(--ratio));
    color: var(--color-fill-grey-inverse);
    font-size: calc(35px * var(--ratio));
  }
  .platform {
    margin-left: calc(62px * var(--ratio));
    margin-right: calc(93px * var(--ratio));
    color: var(--color-fill-grey-inverse);
    font-size: calc(52px * var(--ratio));
    margin-top: calc(18px * var(--ratio));
    font-weight: 700;
    text-align: left;
    margin-bottom: 4vh;
  }
  .qm-card {
    margin: 0px 20px 0px;
    --f7-card-border-radius: 20px;
    text-align: left;
    padding: 0px calc(45px * var(--ratio)) calc(80px * var(--ratio));
    background-image: url("../../../../static/img/land/index5/ju1279.svg"),url("../../../../static/img/land/index5/kaobei3.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-attachment: fixed;
    width: 90%;
    .qm-row {
    text-align: left;
    // margin-bottom: 28px;
    margin: 0px 43.5px 0px;
    height: 57px;
    line-height: 53px;
    display: flex;
    justify-content: space-between;
    // background-color: var(--color-fill-grey-inverse);
    .land {
      color: #0f1826;
      height: 38px;
      border-radius: 5%;
      font-size: var(--font-size-maintitle);
      background: linear-gradient(179deg, transparent 80%, #3385ff43 20%);
      border-radius: 5px;
    }
    .register {
      color: #fefefe;
      font-size: var(--font-size-maintitle);
    }
  }
    .iconimg {
      width: 16px;
      height: 19px;
      margin-bottom: -4px;
      margin-right: 6px;
    }
    .ID {
      padding-top: calc(77px * var(--ratio));
      color: #28282c;
      font-size: 14px;
      font-weight: 600;
    }
    .password {
      padding-top: calc(53px * var(--ratio));
      color: #28282c;
      font-size: 14px;
      font-weight: 600;
    }
    .qm-link {
      font-size: 13px;
      color: var(--color-brand);
      margin-bottom: calc(75px * var(--ratio));
    }
    .qm-button {
      background-color: var(--color-brand);
      font-size: var(--font-size-maintitle);
      --f7-button-raised-box-shadow: auto;
    }
    // 输入框内默认文字
    /deep/ .van-field__control {
      margin-left: 9px;
      height: 45px;
    }
    /deep/ .van-field__right-icon {
      margin-right: 0px;
    }
    /deep/ .van-field__clear {
      margin-right: 0px;
    }
    /deep/ .van-search {
      padding: 10px 0px;
    }
  }
  .footer {
    position: absolute;
    text-align: center;
    color: #ffffff69;
    font-size: 12px;
    left: 0px;
    right: 0px;
    margin-top: 135px;
  }
  /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #f5f7fa inset !important;}
}
</style>
